<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>造咖APP</title>
	<!-- 导入样式 -->
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/headandfter.css" />
    
    <link rel="stylesheet" type="text/css" href="../css/zkapp.css" />
    <link rel="stylesheet" type="text/css" href="../css/appanimate.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/header.js"></script>
</head>

<body>
<section>
  <div class="app-top-content">
    <div class="app-top fixed">
      <div class="a-t-r right">
        <div class="a-t-logo"><img src="../images/zkapp/zk-logo2.png" width="100" /><span>番石榴</span></div>
        <div class="a-ewm fixed"><img class="right" src="../images/zkapp/zk-ewm.png" width="80" /><span><img src="../images/zkapp/smbg.png" width="58" /></span></div>
        <p class="a-t-txt">女人是需要被关心，被了解的，造咖，专为女性而诞生的APP，赶快下载吧思密达！</p>
        <div class="DownBtnInfo"><a href="#/" class="DownAndroid">下载Android版</a><a href="#/" class="DownIos">下载iPhone版</a></div>
        <p class="a-t-txt2">向下拉了解详细内容</p>
      </div>
      <div class="iphone1" style="padding-left:100px;"><img src="../images/zkapp/iphone-img1.png" height="600" /></div>
      <div class="tringle1" style="text-align:center; padding-top:10px;"><a href="#/"><img src="../images/zkapp/icon-tringle4.png" /></a></div>
    </div>
  </div>
  <!--End 头部-->
  
  <div class="app-banner">
    <p class="a-b-title">造咖APP有多帅？</p>
    <p class="a-b-txt">造咖是由一个拥有丰富亲子经验的亲子社区，我们有强大的妈妈群体用户，各种育儿平台，专业的育儿知识，一个年轻又有活力的团队。正因为这样我们渐渐的发现了女性在生活中遇到的各种问题，而造咖就是为解决这些问题而诞生的。</p>
  </div>
  <!--End banner-->
  
  <div class="app-container">
    <div class="app-content app-content1">
      <ul class="fixed">
        <li class="size-left">
          <p><img src="../images/zkapp/sizeimg1.png" width="120" /></p>
          <p class="size-title">聚拢百万专业亲子知识，汇集30万女性生活趣味掌握妈妈知识，涵盖女性趣味</p>
          <p class="size-txt">We are waiting for you.</p>
        </li>
        <li>
          <div><img src="../images/zkapp/iphone-img2.png" width="460" class="iphoneimg2" /></div>
        </li>
      </ul>
      <div class="right-img1"><img src="../images/zkapp/icon-man.png" width="300" /></div>
    </div><!--End content1-->
    
    <div class="app-content app-content2">
      <div class="app-texiao app-texiao1">
        <div class="htiao1"></div>
        <div class="htiao2"></div>
        <div class="cicle1"><img src="../images/zkapp/cicle1.png" width="36" /></div>
        <div class="cicle2"><img src="../images/zkapp/cicle2.png" width="32" /></div>
        <div class="cicle3"><img src="../images/zkapp/cicle3.png" width="20" /></div>
        <div class="cicle4"><img src="../images/zkapp/cicle4.png" width="20" /></div>
        <div class="cicle5"><img src="../images/zkapp/cicle5.png" width="19" /></div>
        <div class="cicle6"><img src="../images/zkapp/cicle6.png" width="41" /></div>
      </div>
      <ul class="fixed">
        <li>
          <div class="right"><img src="../images/zkapp/iphone-img3.png" width="400" class="iphoneimg3" /></div>
        </li>
        <li class="size-right">
          <p><img src="../images/zkapp/sizeimg2.png" width="120" /></p>
          <p class="size-title2">横跨时尚、美食、情感、健康 、美图等诸多女性 分类版块</p>
          <p class="size-txt">Wait for you to try.</p>
        </li>
      </ul>
      <div class=" fixed">
        <div class="app-texiao app-texiao2 right">
          <div style="overflow:hidden; width:100%; height:100%;">
            <div class="htiao1_2"></div>
            <div class="htiao2_2"></div>
          </div>
          <div class="man1"><img src="../images/zkapp/manimg1.png" width="60" /></div>
          <div class="man2"><img src="../images/zkapp/manimg2.png" width="46" /></div>
          <div class="man3"><img src="../images/zkapp/manimg3.png" width="55" /></div>
          <div class="star1"><img src="../images/zkapp/starimg1.png" width="28" /></div>
          <div class="star2"><img src="../images/zkapp/starimg2.png" width="18" /></div>
          <div class="star3"><img src="../images/zkapp/starimg3.png" width="18" /></div>
        </div>
      </div>
    </div><!--End content2-->
    
    <div class="app-content app-content3">
      <ul class="fixed">
        <li class="size-left">
          <p><img src="../images/zkapp/sizeimg3.png" width="120" /></p>
          <p class="size-title" style="width:480px; padding-left:100px;">上知孕婴育儿，下知美食娱乐八卦；内晓孕育全程各阶段的问题，外通时尚、情感、生活那些事儿。</p>
          <p class="size-txt">We are waiting for you.</p>
        </li>
        <li>
          <div class="navInfo">
            <img src="../images/zkapp/iphone-img4.png" width="206" class="iphoneimg4" />
            <img src="../images/zkapp/iphone-img4btm.png" width="460" class="iphoneimg4btm" />
            <a href="#/" class="navimg1"><img src="../images/zkapp/animateimg1.png" width="85" /></a>
            <a href="#/" class="navimg2"><img src="../images/zkapp/animateimg2.png" width="84" /></a>
            <a href="#/" class="navimg3"><img src="../images/zkapp/animateimg3.png" width="91" /></a>
            <a href="#/" class="navimg4"><img src="../images/zkapp/animateimg4.png" width="106" /></a>
            <a href="#/" class="navimg5"><img src="../images/zkapp/animateimg5.png" width="106" /></a>
            <a href="#/" class="navimg6"><img src="../images/zkapp/animateimg6.png" width="106" /></a>
            <a href="#/" class="navimg7"><img src="../images/zkapp/animateimg7.png" width="107" /></a>
            <a href="#/" class="navimg8"><img src="../images/zkapp/animateimg8.png" width="88" /></a>
            <a href="#/" class="navimg9"><img src="../images/zkapp/animateimg9.png" width="86" /></a>
          </div>
        </li>
      </ul>
    </div><!--End content3-->
  </div>
  <!--End container-->
</section>
<!--End section-->
<footer>
  <div class="footer" style="padding-bottom:0;">
    <div class="f-top">
      <div class="size4"><img src="../images/zkapp/sizeimg4.png" width="160" /></div>
      <img src="../images/zkapp/icon-smile.png" class="smile" width="60" />
    </div>
    <div class="f-content">
      <p class="f-txt"><span>这就是造咖!</span>所有完美，因你而造.</p>
      <p style="text-align:center; padding:10px 0;"><img src="../images/zkapp/zk-logo2.png" width="90" /></p>
      <div style="position:relative; height:40px; padding-top:10px;"><a href="#/" class="AndroidBtn2">Android下载</a><img src="../images/zkapp/ewmbg.png" class="ewmbg" height="95" /></div>
      <div style="padding-top:15px; height:40px; position:relative;"><a href="#/" class="IosBtn2">iPhone下载</a></div>
    </div>
  </div>
</footer>
<!--End footer-->
</body>
<script language="javascript">
$(function(){
	
	var scrollTop = $(window).scrollTop();
		console.log(scrollTop);
	$(window).scroll(function(){
		scrollTop = $(this).scrollTop();
		console.log(scrollTop);
		if(scrollTop>=400&&scrollTop<=1600){
			$('.app-content1').addClass('animate1');
		}
		if(scrollTop>=650&&scrollTop<=1800){
			$('.app-content2').addClass('animate2');
		}
		if(scrollTop>=1000&&scrollTop<=2000){
			$('.app-texiao2').addClass('animate3');
		}
		if(scrollTop>=1300&&scrollTop<=2400){
			$('.navInfo').parent().addClass('animate4');
		}
	})
})

</script>
</html>
